<template>
	<el-dialog
		:title="`会员游戏输赢详情`"
		:visible="visible"
		width="350px"
		class="rempadding"
		:destroy-on-close="true"
		:before-close="handleClose"
		@close="handleClose"
	>
		<div class="itemBox">
			<div class="item">
				<div class="s1">真人游戏输赢</div>
				<div
					class="s2"
					:style="handleNumberColor(curTableData.zrNetAmount)"
				>
					{{ handleTotalNumber('USDT', curTableData.zrNetAmount) }}
				</div>
			</div>
			<div class="item">
				<div class="s1">体育游戏输赢</div>
				<div
					class="s2"
					:style="handleNumberColor(curTableData.tyNetAmount)"
				>
					{{ handleTotalNumber('USDT', curTableData.tyNetAmount) }}
				</div>
			</div>
			<div class="item">
				<div class="s1">棋牌游戏输赢</div>
				<div
					class="s2"
					:style="handleNumberColor(curTableData.qpNetAmount)"
				>
					{{ handleTotalNumber('USDT', curTableData.qpNetAmount) }}
				</div>
			</div>
			<div class="item">
				<div class="s1">电竞游戏输赢</div>
				<div
					class="s2"
					:style="handleNumberColor(curTableData.djNetAmount)"
				>
					{{ handleTotalNumber('USDT', curTableData.djNetAmount) }}
				</div>
			</div>
			<div class="item">
				<div class="s1">彩票游戏输赢</div>
				<div
					class="s2"
					:style="handleNumberColor(curTableData.cpNetAmount)"
				>
					{{ handleTotalNumber('USDT', curTableData.cpNetAmount) }}
				</div>
			</div>
			<div class="item">
				<div class="s1">电子游戏输赢</div>
				<div
					class="s2"
					:style="handleNumberColor(curTableData.dyNetAmount)"
				>
					{{ handleTotalNumber('USDT', curTableData.dyNetAmount) }}
				</div>
			</div>
		</div>
	</el-dialog>
</template>

<script>
import list from '@/mixins/list'

export default {
	components: {},
	mixins: [list],
	props: {
		isDetail: {
			type: Boolean,
			default: false
		},
		curData: {
			type: Object,
			default: () => {}
		},
		orderNo: {
			type: String,
			default: ''
		},
		visible: {
			type: Boolean,
			default: false
		},
		handleVisible: {
			type: Object,
			default: () => {}
		}
	},
	data() {
		return {
			curTableData: {}
		}
	},
	created() {
		if (!this.isDetail) {
			this.getTableData()
		} else {
			this.curTableData = this.curData?.netAmountResDTO || {}
		}
	},
	methods: {
		getTableData() {
			this.loading = true
			this.curTableData = {}
			this.$api
				.getProxyCommissionCashDetail({ id: this.orderNo })
				.then((res) => {
					this.loading = false
					this.curTableData = res?.data?.netAmountResDTO || {}
				})
				.catch(() => {
					this.loading = false
				})
		},
		handleClose() {
			this.$emit('update:visible', false)
		}
	}
}
</script>
<style lang="scss" scoped>
.itemBox {
	margin: 0 auto;
	width: 300px;
	border: 1px solid #dedede;
	.item {
		display: flex;
		border-bottom: 1px solid #dedede;
		height: 35px;
		align-items: center;
		padding: 0 20px;
		&:last-child {
			border-bottom: 0;
		}
		div {
			flex: 1;
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
	.s1 {
		border-right: 1px solid #dedede;
	}
}
</style>
